<template>
  <div class="page">
    <div class="page-bg"></div>
    <HeaderView></HeaderView>
    <div class="content">
      <LeftView />
      <CenterView class="flex-1" />
      <RightView />
    </div>
  </div>
</template>

<script lang="ts" setup name="Screen">
import HeaderView from './components/HeaderView.vue'
import LeftView from './components/left-view/index.vue'
import RightView from './components/right-view/index.vue'
import CenterView from './components/center-view/index.vue'

document.title = '碧丽智慧物联网数据监控平台'
</script>

<style lang="scss">
.page {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  min-width: 1920px;
  min-height: 1080px;
}

.page-bg {
  position: absolute;
  height: 100vh;
  min-width: 1920px;
  min-height: 1080px;
  width: 100vw;
  background-size: cover;
  background-position: 50%;
  left: 0;
  background-image: url('@/assets/bg.jpg');
  top: 0;
  z-index: -1;
}

.content {
  padding: 20px 20px 0;
  display: flex;
  .flex-1 {
    flex: 1;
  }
}
</style>
